<template>
  <div ref="list" @scroll="onScroll" class="article-list">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!--
        load事件绑定的onLoad
            作用：用来加载数据的
            触发时机
                当页面一打开就自动调用
                当第一次加载的数据如果没有铺满一屏，会再次调用
        v-model绑定的loading
            是用来标记本次的加载状态，当它为true时，代表正在加载，onLoad不会调用
            当它为false代表当前没有在加载，那onLoad可以调用
            当onLoad调用时会自动把这个值改为true

            总结：
                这个值默认值应该给false，否则一次数据都不加载
                这个值在加载完数据后，应该立即改为false，不然下次加载无法加载
        finished
            用来标记是否全部加载完毕
            默认应该为false，不然一次onLoad都不会调用
            如果加载完数据必须判断数据是否全部加载完，如果全部加载完就把这个值改为true
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id"
          :to="`/article/${item.art_id}`"
        >
          <!-- 标题 -->
          <div class="title">{{ item.title }}</div>
          <!-- 图片 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>
          <!-- 信息 -->
          <div class="info-box">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | relvTime }}</span>
            <van-icon style="float: right" name="cross" />
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from '@/api/news'
export default {
  props: {
    channel_id: {
      type: Number,
      required: true
    }
  },
  activated () {
    // 把记录的滚动条的位置赋值给滚动条
    this.$refs.list.scrollTop = this.scrollTop
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      pullLoading: false,
      scrollTop: 0
    }
  },
  methods: {
    onScroll () {
      this.scrollTop = this.$refs.list.scrollTop
    },
    async onLoad () {
      // 发请求获取新闻数据
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })

      // 把上一个时间段的时间戳赋值给timestamp
      this.timestamp = res.data.pre_timestamp

      // 注意：这里要用push，如果直接赋值会被覆盖
      // 而这里要越刷越多，所以用push
      this.list.push(...res.data.results)

      // 加载完数据把loading改为false
      this.loading = false

      //   if (this.timestamp === null) {
      //     this.finished = true
      //   }
      this.finished = this.timestamp === null
    },
    // 下拉刷新调用
    async onRefresh () {
      // 发请求获取新闻数据
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 刷新就是要最新的
        timestamp: Date.now()
      })

      // 把上一个时间段的时间戳赋值给timestamp
      this.timestamp = res.data.pre_timestamp
      // 上拉刷新应该是覆盖数组 -- 这样才能覆盖全部内容，相当于刷新
      this.list = res.data.results

      // 把加载中改为false
      this.pullLoading = false

      // 把完成状态改为false
      this.finished = false
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  top: 90px;
  bottom: 50px;
  width: 100vw;
  overflow: auto;

  .info-box {
    span {
      color: gray;
      &:nth-child(2) {
        margin: 0 15px;
      }
    }
  }
}
</style>
